<template>
  <div @click="handleClick">{{count}}</div>
  <h1>count: {{count}}</h1>
  <h1>count1: {{count1}}</h1>
  <h1>{{addSum}}</h1>
</template>

<script setup>
import { ref, watch, reactive, computed } from 'vue';
const count = ref(1)
const count1 = ref(2)
const person = reactive({
  name: '小白',
  age: '18'
})
const handleClick = () => {
  count.value ++
  person.name = '小黑'
}
const addSum = computed(() => {
  return count.value + count1.value
})
// 单个监听数据
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

// 多个监听数据
watch([count, count1], (newValue, oldValue) => {
  console.log(newValue, oldValue) // 输出的值为数组格式
})

// 监听 reactive 定义的响应式数据
// 当监听一个复杂对象的属性或者数组时需要传入第三个参数{deep:true}
watch(() => person.name, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, {
  deep: true
})
</script>

<style scoped>

</style>